<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >宿舍检查</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/healthy/tongji' }">查寝统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card margintop20">
            <div slot="header" class="clearfix">
                <span>9月份第2周缺勤人数</span>
            </div>
            <div v-for="o in 1" :key="o" class="text item">
                <p class="p1">15人</p>
                <p class="p2">9月总缺勤人数</p>
                <i class="el-icon-edit"></i>
                <p class="p3">31人</p>
            </div>
        </el-card>
        <el-card class="box-card margintop20">
            <div slot="header" class="clearfix">
                <span>9月份第2周寝室卫生不及格情况</span>
            </div>
            <div v-for="o in 1" :key="o" class="text item">
                <p class="p1">4间</p>
                <p class="p2">9月总卫生不及格</p>
                <i class="el-icon-edit"></i>
                <p class="p3">9间</p>
            </div>
        </el-card>

        <div id="main"></div>
        <div id="echarts"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                isCollapsed: false,
                charts: ''
            };
        },
        methods: {
            drawPie(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '9月份第2周缺勤'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 人'
                        }
                    },
                    series: [{
                        name: '缺勤人数',
                        type: 'line',
                        data: [2,1,0,1,4,7,0]
                    }]
                })
            },
            drawPie2(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '9月份第2周寝室卫生不及格情况'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 间'
                        }
                    },
                    series: [{
                        name: '卫生不及格寝室数量',
                        type: 'line',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#99CCFF',
                                lineStyle: {
                                    color: '#99CCFF'
                                }
                            }
                        },
                        data: [0,1,0,0,1,1,0]
                    }]
                })
            }
        },
        //调用
        mounted() {
            this.$nextTick(function() {
                this.drawPie('main')
                this.drawPie2('echarts')
            })
        },
        computed: {
            menuitemClasses: function() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
    }
</script>

<style lang="scss" >
#main{
    width: 400px;
    height: 300px;
    top: 250px;
    border:1px solid #d7dbe2;
}
#echarts{
    width: 400px;
    height: 300px;
    top:-50px;
    left: 500px;
    border:1px solid #d7dbe2;
}
.box-card{
    width: 300px;
    height: 175px;
    float: left;
    margin-right: 200px;
}
.clearfix span{
    font-size: 15px;
    font-weight: 600;
}
.p1{
    font-size: 45px;
    font-weight: 400;
}
.p2{
    font-size: 15px;
    font-weight: 600;
    float: left;
    margin-top: 8px;
}
.p3{
    font-size: 15px;
    font-weight: 600;
    float: right;
    margin-top: 8px;
}
.el-icon-edit{
    font-size: 15px;
    float: right;
    margin-top: 10px;
    margin-left: 3px;
}
</style>